<template>
  <div>
    <x-Table
        :loading="loading"
        :table-data="tableData"
        :options-data="options"
        :pagination="pagination"
        :rule-form="ruleForms"
        @handleAdd="handleAdd"
        @handlePaginationCurrentChange="handlePaginationCurrentChange"
        @handlePaginationSizeChange="handlePaginationSizeChange"
        @handleHeardDel="handleHeardDel"
        @searchForm="searchForm"
        @resetForm="resetForm"
    >
      <template slot="sum">
        <el-table-column
            label="总分"
            align="center"
            show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag
                v-if="parseFloat(scope['row']['robot_score']) + parseFloat(scope['row']['school_score']) >= scope['row']['pass_score']"
                type="primary" effect="dark">
              {{ parseFloat(scope["row"]['robot_score']) + parseFloat(scope['row']['school_score']) }}
            </el-tag>
            <el-tag
                v-if="parseFloat(scope['row']['robot_score']) + parseFloat(scope['row']['school_score']) < scope['row']['pass_score']"
                type="danger" effect="dark">
              {{ parseFloat(scope["row"]['robot_score']) + parseFloat(scope['row']['school_score']) }}
            </el-tag>
          </template>
        </el-table-column>
      </template>
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
        v-dialog-drag
        :title="alertTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="45%"
    >
      <form-create
          v-model="fapi"
          :rule="rule"
          :option="option"
          :value.sync="formParam"
          @submit="onSubmit"
      >
      </form-create>
    </el-dialog>
    <!--    end-->

    <!--    批阅试卷-->
    <el-dialog
        v-dialog-drag
        title="批阅试卷"
        :visible.sync="read"
        :close-on-click-modal="false"
        width="65%"
    >
      <read-exam @refreshData="refreshData" :examData="examData" :baseData="baseData"/>
    </el-dialog>
    <!--    end-->

  </div>
</template>

<script>
let _this;
import readExam from './components/readExam';

export default {
  components: {readExam},
  data() {
    return {
      baseData: null,// 当前选择的参数
      examData: null,//当前考试数据
      read: false,//阅读题弹窗开关
      searchParams: {},//搜索对象
      loading: true,
      row: null, //当前选择数据
      ruleForms: {
        user_name: {label: "学生姓名", prop: "user_name", type: "text"},
        idcard: {label: "身份证号", prop: "idcard", type: "text"},
        exam_id: {label: "考试批次", prop: "exam_id", type: "text"},
        submit_type: {
          label: "提交类型",
          prop: "submit_type",
          type: "select",
          select: [{label: '正常提交', value: '1'}, {label: '暂时保存', value: '0'}]
        },
        exam_type: {
          label: "类型",
          prop: "exam_type",
          type: "select",
          select: [{label: '考试', value: '1'}, {label: '作业', value: '0'}]
        },
        read_status: {
          label: "批阅状态",
          prop: "read_status",
          type: "select",
          select: [{label: '已批阅', value: '1'}, {label: '未批阅', value: '0'}]
        },
      },
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      otherParam: {
        halfCheckedKeys: [],
      }, //如果有其他情况会拼接这个参数
      fapi: {},
      formParam: {},
      rule: [
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "select",
                  "field": "level",
                  "title": "层次",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "props": {
                    "clearable": false,
                    "filterable": false,
                    "allowCreate": false,
                    "disabled": true
                  },
                  "options": [
                    {
                      "value": "本科",
                      "label": "本科"
                    },
                    {
                      "value": "专科",
                      "label": "专科"
                    }
                  ],
                  "_fc_drag_tag": "select",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "idcard",
                  "title": "身份证号",
                  "info": "",
                  "props": {
                    "disabled": true
                  },
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "radio",
                  "field": "submit_type",
                  "title": "提交类型",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "props": {
                    "disabled": false
                  },
                  "options": [
                    {
                      "value": "正常提交",
                      "label": "正常提交"
                    },
                    {
                      "value": "暂时保存",
                      "label": "暂时保存"
                    }
                  ],
                  "_fc_drag_tag": "radio",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "radio",
                  "field": "exam_type",
                  "title": "类型",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "props": {
                    "disabled": true
                  },
                  "options": [
                    {
                      "value": "考试",
                      "label": "考试"
                    },
                    {
                      "value": "作业",
                      "label": "作业"
                    }
                  ],
                  "_fc_drag_tag": "radio",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "switch",
                  "field": "status",
                  "title": "状态",
                  "info": "",
                  "_fc_drag_tag": "switch",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "inputNumber",
                  "field": "total_score",
                  "title": "考试总分",
                  "info": "",
                  "props": {
                    "min": 1,
                    "controls": true,
                    "disabled": true
                  },
                  "_fc_drag_tag": "inputNumber",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "inputNumber",
                  "field": "robot_score",
                  "title": "机改分数",
                  "info": "",
                  "props": {
                    "min": 1,
                    "disabled": true
                  },
                  "_fc_drag_tag": "inputNumber",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "inputNumber",
                  "field": "school_score",
                  "title": "阅卷分数",
                  "info": "",
                  "props": {
                    "min": 1,
                    "disabled": true
                  },
                  "_fc_drag_tag": "inputNumber",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12,
                "offset": 0,
                "push": 0,
                "pull": 0
              },
              "children": [
                {
                  "type": "inputNumber",
                  "field": "pass_score",
                  "title": "及格分数",
                  "info": "",
                  "props": {
                    "max": 1,
                    "disabled": true
                  },
                  "_fc_drag_tag": "inputNumber",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12,
                "pull": 0
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "start_time",
                  "title": "答卷开始时间",
                  "info": "",
                  "props": {
                    "type": "datetime",
                    "disabled": true
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "end_time",
                  "title": "交卷时间",
                  "info": "",
                  "props": {
                    "type": "datetime",
                    "disabled": true
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "examStart_time",
                  "title": "考试开始时间",
                  "info": "",
                  "props": {
                    "type": "datetime",
                    "disabled": true
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "examEnd_time",
                  "title": "考试结束时间",
                  "info": "",
                  "props": {
                    "type": "datetime",
                    "disabled": true
                  },
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        }
      ],
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "125px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
      },
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [],
      options: {
        fields: {
          id: {label: "ID", prop: "id", width: "80", order: true},
          user_name: {label: "学生姓名", prop: "user_name"},
          start_face: {
            label: '人脸认证',
            prop: 'start_face',
            type: 'image',
            sing: ',',
            style: {width: '30px', height: '30px'},
            preview: function (scope, item, index) {
              console.log(scope)
              console.log(item)
              console.log(index)
            },
          },
          middle_face: {
            label: '随机截图',
            prop: 'middle_face',
            width: '130',
            type: 'image',
            sing: ',',
            style: {width: '30px', height: '30px'},
            preview: function (scope, item, index) {
              console.log(scope)
              console.log(item)
              console.log(index)
            },
          },
          end_face: {
            label: '交卷认证',
            prop: 'end_face',
            type: 'image',
            sing: ',',
            style: {width: '30px', height: '30px'},
            preview: function (scope, item, index) {
              console.log(scope)
              console.log(item)
              console.log(index)
            },
          },
          class_id: {label: "课程名称", prop: "class_id", type: 'two', options: {obj: "OfficeClass", objKey: 'title'}},
          exam_id: {label: "考试批次", prop: "exam_id",},
          major_id: {label: "专业名称", prop: "major_id", type: 'two', options: {obj: "majors", objKey: 'title'}},
          idcard: {label: "身份证号", prop: "idcard"},
          read_status: {
            label: "批阅状态",
            prop: "read_status",
            type: 'tag',
            effect: 'dark',
            options: [{label: '已批阅', attr: 'primary'}, {label: '未批阅', attr: 'danger'}]
          },
          submit_type: {
            label: "提交类型",
            prop: "submit_type",
            type: 'tag',
            options: [{label: '正常提交', attr: 'primary'}, {label: '暂时保存', attr: 'danger'}]
          },
          exam_type: {
            label: "类型",
            prop: "exam_type",
            type: 'tag',
            options: [{label: '考试', attr: 'primary'}, {label: '作业', attr: 'success'}]
          },
          sum: {label: "总分", prop: "sum", type: 'slot', slot: 'sum'},
          total_score: {label: "满分", prop: "total_score"},
          robot_score: {label: "机改分数", prop: "robot_score"},
          school_score: {label: "阅卷分数", prop: "school_score"},
          pass_score: {label: "及格分数", prop: "pass_score"},
          level: {
            label: "层次",
            prop: "level",
            type: 'tag',
            options: [{label: '专科', attr: 'info'}, {label: '本科', attr: 'primary'}]
          },
          status: {
            label: "状态",
            prop: "status",
            type: "switch",
            activeValue: true,
            inactiveValue: false,
            switchChage: function (scope) {
            },
          },
          start_time: {label: "答卷开始时间", prop: "start_time"},
          end_time: {label: "交卷时间", prop: "end_time"},
          examStart_time: {label: "考试开始时间", prop: "examStart_time"},
          examEnd_time: {label: "考试结束时间", prop: "examEnd_time"},
          create_time: {label: "创建时间", prop: "create_time", order: true},
          button: {
            label: "操作",
            width: "200",
            type: "func",
            fixed: true,
            options: [{
              label: '批阅试卷', handle: function (scope) {
                _this.examData = scope['row']['content']
                _this.read = true;
                _this.baseData = scope['row'];
              }
            }, {
              label: '视频回放', handle: function (scope) {
                _this.selectVideUrl(scope['row']);
              }
            }],
            edit: function (scope) {
              setTimeout(() => {
                Object.keys(scope['row']).forEach((item) => {
                  _this.fapi.setValue(item, scope["row"][item]);
                })

              }, 0);
              _this.row = scope["row"];
              _this.alertTitle = "编辑";
              _this.dialogVisible = true;
            },
            del: function (scope) {
              _this.deleteDate(scope["row"].id);
            },
          },
        },
      },
    };
  },
  methods: {

    /**
     * 查询视频监控回放
     */
    selectVideUrl: function (param) {
      if (!param['idcard'] || !param['exam_id']) return this.$message.error('缺少必要参数！');
      _this.$store
          .dispatch("exam/selectVideUrl", {
            exam_id: param['exam_id'],
            idcard: param['idcard'],
          })
          .then((res) => {
            const {data, code} = res;
            if (code == 400) return this.$message.error('没找到该视频监控');
            window.open(data)
          });
    },

    toFixedScore: function (left, right) {
      // return   this.addDate(left,right)
    },

    refreshData: function () {
      this.read = false;
      this.getDateList(_this.searchParams);
    },

    resetForm: function () {
      _this.searchParams = {};
    },
    handlePaginationCurrentChange: function (val, searchValue) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.getDateList(_this.searchParams);
    },

    handlePaginationSizeChange: function (val, searchValue) {
      console.log(searchValue)
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.getDateList(_this.searchParams);
    },

    /**
     * 查询所有专业数据
     */
    getDateList: function (param) {
      _this.loading = true;
      _this.$store
          .dispatch("exam/getRecordList", param ? {
            exam_id: param['exam_id'],
            idcard: param['idcard'],
            user_name: param['user_name'],
            exam_type: param['exam_type'],
            read_status: param['read_status'],
            submit_type: param['submit_type'],
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          } : {
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          })
          .then(() => {
            _this.loading = false;
            _this.dialogVisible = false;
            let data = this.$store.state.exam.recordList;
            this.tableData = data.data;
            _this.pagination["currentPage"] = data["current_page"];
            _this.pagination["total"] = data["total"];
          });
    },



    /**
     * 批量删除
     */
    handleHeardDel: function (val) {
      let del = [];
      val.forEach((item, index) => {
        del.push(item.id);
      });
      _this.deleteDate(del);
    },


    addDate: function (param) {
      _this.$store
          .dispatch("office/addMajorList", {
            title: param["title"],
            level: param["level"],
            major_code: param["major_code"],
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.$message.success(msg);
              _this.getDateList();
            } else {
              _this.$message.error(msg);
            }
          });
    },
    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.alertTitle === "添加") {
        _this.addDate(val);
      } else {
        //编辑
        _this.updateDate(val);
      }
    }
    ,

    /**
     * 搜索角色标题
     */
    searchForm: function (val) {
      _this.getDateList(val)
      _this.searchParams = val;
    }
    ,
    /**
     * 更新角色
     */
    updateDate: function (param) {
      _this.$store
          .dispatch("exam/createOrUpdate", {
            id: _this.row == null ? '' : _this.row.id,
            status: param["status"],
            submit_type: param["submit_type"],
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.getDateList();
              _this.$message.success(msg);
              return;
            }
            return _this.$message.error(msg);
          });
    }
    ,

    /**
     * 删除角色
     */
    deleteDate: function (val) {
      _this.$store
          .dispatch("exam/delRecord", {
            id: val,
          })
          .then((res) => {
            const {data, msg} = res;
            if (data) {
              _this.getDateList();
              _this.$message.success(msg);
              return;
            }
            return _this.$message.error(msg);
          });
    }
    ,

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      // _this.alertTitle = "添加";
      // this.dialogVisible = true;
    }
    ,
  },
  watch: {
    dialogVisible(newVal) {
      setTimeout(() => {
        if (!newVal) {
          _this.fapi.resetFields(); //清空数据
          _this.fapi.setValue('content', '');
        }
      }, 0);
    }
    ,
  }
  ,
  created() {
    _this = this;
  }
  ,
  mounted() {
    this.getDateList();
  }
  ,
}
;
</script>

<style scoped></style>
